import React from 'react'
import {
    Button,
    message,
    Modal
} from 'antd'
import SearchBar from '../../components/SearchBar'
import Table from '../../components/Table'
import {
    FormModal
} from '../../components/ModalForm'
import 'whatwg-fetch'
import API from '../../axios/api'
import {UserType} from "../../utils/system-data";
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
import ArticleModalForm from './form'
import { json } from 'graphlib';

const confirm = Modal.confirm


let columns = [
    { dataIndex: '', title: '序号', width: 60, render: (text, record,index) =>  <span>{index + 1}</span>},
    { dataIndex: 'HallName', title: '班级名称', width: 200,},
    { dataIndex: 'RudderName', title: '分舵名称', width: 140,},
    { dataIndex: 'PayPosAppId', title: '商户号', width: 140,},
    { dataIndex: 'PayPosAppSecret', title: '商户密匙', width: 140,},


]
@withRouter @inject('appStore') @observer
class Hall extends React.Component {
    constructor(props) {
        super(props)
         const {user, rudder, rudderList} = this.props.appStore
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            tData: [],
            item: {},
            loading: true,
            addUserShow:false,
            itemInfo:{},
            initHallList:[],
            initUserList:[],
            initUserListItem:[],
            Page: 1,
            Pages:1,
            RudderId:user.RudderId,
            HallName:'',
        }
    }
    componentWillReceiveProps(nextProps){
       const {user, rudder, rudderList} = this.props.appStore
        this.setState({
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            RudderId:user.RudderId,
        })
    }
   


    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
        }
        await API.getPayPosHallPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    onSearch = (searchFields) => {
        this.setState({
            Page:1
        },()=>{
            this.fetchTableData(searchFields)
        })
       
    }

    searchFields = () => {
        let fields = [{
            title: '班级名称',
            key: 'HallName',
            type: 'input',
        },]
        if(this.state.user.UserRankType === UserType.ADMIN || this.state.user.RudderId == "-"){
            fields = [{
                title: '分舵名称',
                key: 'RudderId',
                type: 'select',
                //defaultValue: this.state.rudder.value,
                items: () => this.state.rudderList,

            }, ].concat(fields)
        }
        return fields
    }

  
    onOkadduser = (param) =>{
        let data = {}
        data.HallId  = param.HallId
        data.PayPosAppId = param.PayPosAppId
        data.PayPosAppSecret = param.PayPosAppSecret
        data.PayPosName = param.PayPosName
        data.SSLCERT_PATH = param.shareImageUpload[0].response
        API.AddPayPosHall(data).then((res) => {
            this.setState({
                addUserShow: false,
            })
            if(res.Code === 200) {
                message.success('添加成功')
                this.fetchTableData()
            }
            else message.error(res.Message)
        })

      
    }

    onCancel = () =>{
        this.setState({
            addUserShow: false,
        })
    }

    add = () => {
        this.setState({
            addUserShow: true
        })
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'add') {
            this.setState({
                item:item,
                addUserShow: true
            })
        }
    }
    initHallList =  async (rudderId) => {
        let params = {
            ...API.config,
            RudderId:  rudderId || this.state.rudder.value,
        }
        await API.fetchHallPages(params).then((res) => {
            let initHallList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => initHallList.push({value: item.Id, mean: item.HallName}))
                this.setState({
                    initHallList
                })
            }
        })
    }

    initUserList =  async (rudderId) => {
        let params = {
            ...API.config,
            RudderId: rudderId || this.state.rudder.value ,
            RankType: -1,
        }
        await API.fetchUserPages(params).then((res) => {
            let _initUserList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => _initUserList.push({value: item.UserId, mean: item.NickName}))
                this.setState({
                    initUserList: _initUserList
                })
            }
        })
    }

    initUserListItem = async (rudderId) => {
        let params = {
            ...API.config,
            RudderId: rudderId || this.state.rudder.value ,
            RankType: -1,
        }
        await API.fetchUserPages(params).then((res) => {
            let _initUserList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => _initUserList.push({value: item.UserId, mean: item.NickName}))
                this.setState({
                    initUserListItem: _initUserList
                })
            }
        })
    }

    rudderChange(v){
        this.initHallList(v)
        this.initHallList(v)
    }

    handerDel(item, status){
        return API.delRole({Id: item.Id, Status: status})
    }

    adduser = () => {
        this.setState({
            addUserShow:true
        })
    }

    render() {
        return (
            <div id="wrap">
                {/**
                <SearchBar
                    onSubmit={this.onSearch}
                    fields={this.searchFields()}
                />
                */}
                <div style={{ paddingTop: 10 }}>
                    <Button  type="primary" onClick={this.add}>添加</Button>
                </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 }}
                            // action={row => [
                            //     { key: 'add', name: '添加支付凭证', color: 'blue', icon: 'plus'},
                            // ]}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
         
                <ArticleModalForm
                    modalKey="add"
                    visible={this.state.addUserShow}
                    title="添加支付凭证"
                    // fields={this.fieldsaddUser()}
                    onOk={this.onOkadduser}
                    onCancel={this.onCancel}
                    rudderList={this.state.rudderList}
                    okText="保存"
                    width={800}
                />

               
            </div>
        )
    }
}
export default Hall
